<form class="vtrade-form" #buyinForm="ngForm">
  <!--买入股票/卖出股票-->
  <div class="terminal-title">
    <span>{{vtrade.formTitle}}</span>
  </div>
  <!--证券代码-->
  <fieldset class="group-symbol" ngModalGroup="symbol">
    <label for="input-symbol">代码</label>
    <input #inputSymbolRef type="text" class="input-symbol" name="input-symbol" placeholder="股票代码" autocomplete="off" [ngModel]="inputSymbol"
      (ngModelChange)="onDataChange($event)" (keydown)="onSymbolKeyboardHandler($event)" (focus)="focusSearch($event)">
    <ul class="search-menu dropdown-menu" *ngIf="isShowSearchList">
      <li *ngFor="let stock of searchStocks; let $even = even; let $index = index" (click)="selectSymbol(stock)" [ngClass]="{'even': $even, 'active': $index===selectedIndex-1}">
        <span class="buyin-symbol">{{stock.symbol}}</span>
        <span class="buyin-name">{{stock.name}}</span>
      </li>
      <li class="empty-symbol" *ngIf="enableEmptyResult && !searchStocks.length" (click)="isShowSearchList=false">无匹配股票!</li>
    </ul>
  </fieldset>
  <!--证券名称(只读)-->
  <fieldset class="group-name" ngModalGroup="name">
    <span>{{inputName || "股票名称"}}</span>
  </fieldset>
  <!--委托策略-->
  <!--<fieldset class="group-strategy" ngModalGroup="strategy">
    <label for="input-strategy">策略</label>
    <select name="input-strategy" class="input-strategy" #sel (change)="changeStrategy(sel.value)">
      <option *ngFor="let strategy of strategies">{{strategy.label}}</option>
    </select>
  </fieldset>-->
  <!--买入价格-->
  <fieldset class="group-price" ngModalGroup="price">
    <label for="input-price">{{vtrade.priceTitle}}</label>
    <button class="step-left reduce-price btn btn-sm btn-success" [ngClass]="{'buyin':tradeType==='buyin', 'saleout':tradeType==='saleout'}"
      (click)="changePrice('-')">
      <i class="fa fa-minus-square"></i>
      </button>
    <input #inputPriceRef type="number" step=".01" [attr.min]="down_price" [attr.max]="up_price" name="input-current" [ngModel]="inputPrice | number:'1.2'"
      placeholder="" (keydown)="onPriceKeyboardHandler($event)" (focus)="isPriceFocus=true" (blur)="isPriceFocus=false">
    <button class="step-right add-price btn btn-sm btn-danger" [ngClass]="{'buyin':tradeType==='buyin', 'saleout':tradeType==='saleout'}"
      (click)="changePrice('+')">
          <i class="fa fa-plus-square"></i>
          </button>
  </fieldset>
  <!--可买卖数量(只读)-->
  <fieldset class="group-available" ngModalGroup="available">
    <span>{{vtrade.availableTitle}}</span>
    <span [ngClass]="{'buyin':tradeType==='buyin', 'saleout':tradeType==='saleout'}">{{inputAvailable || "-"}}</span>
    <span>股</span>
  </fieldset>
  <!--买入/卖出数量-->
  <fieldset class="group-amount" ngModalGroup="amount">
    <label for="input-amount">{{vtrade.amountTitle}}</label>
    <button class="step-left reduce-amount btn btn-sm btn-success" [ngClass]="{'buyin':tradeType==='buyin', 'saleout':tradeType==='saleout'}"
      (click)="changeAmount('-')"><i class="fa fa-minus-square"></i></button>
    <input #inputAmountRef type="number" step="100" min="0" [attr.max]="inputAvailable" name="input-amount" [ngModel]="inputAmount"
      (keydown)="onAmountKeyboardHandler($event)" (focus)="isAmountFocus=true" (blur)="onBlurUpdateAmount(inputAmountRef.value)">
    <button class="step-right add-amount btn btn-sm btn-danger" [ngClass]="{'buyin':tradeType==='buyin', 'saleout':tradeType==='saleout'}"
      (click)="changeAmount('+')"><i class="fa fa-plus-square"></i></button>
  </fieldset>
  <!--仓位控制-->
  <div class="holding-control" [ngClass]="{'buyin':tradeType==='buyin', 'saleout':tradeType==='saleout'}">
    <button *ngFor="let item of holdingList" (click)="changeAmount(item.key)">{{item.label}}</button>
  </div>
  <!--买入操作-->
  <div class="buyin-action" *ngIf="tradeType==='buyin'">
    <button class="btn btn-sm btn-primary" (click)="buyin()">买入</button>
  </div>
  <!--卖出操作-->
  <div class="saleout-action" *ngIf="tradeType==='saleout'">
    <button class="btn btn-sm btn-primary" (click)="saleout()">卖出</button>
  </div>
  <!--弹出下拉列表时显示的空白区域，点击此区域关闭下拉菜单-->
  <div class="modal-backdrop fade" *ngIf="isShowSearchList" [ngClass]="{'in': isShowSearchList}" (click)="isShowSearchList=false"></div>
</form>